<template>
	<view>
		<view class="content" :style="{height:aaaa}">
			<view style="text-align: center; font-size: 70rpx;padding-top: 350rpx;"><text>微漫社区</text></view>
			<view class="text-area">
				<view>
					<view class="flex size">账号：<input type="text" style="border-bottom: 1rpx solid #323232;" v-model="usernametxt" /></view>
					<view class="flex size"> 密码：<input password="true" style="border-bottom: 1rpx solid #323232;" type="digit" v-model="passwordtxt" /></view>


				</view>
			</view>
			<view class="flex">
				<button class="border-radius size" plain="true" style="margin-top: 80rpx;color: #ffffff; border: 0; border-bottom: 1rpx solid #151515;  "
				 @click="Event_Login()">账号登录</button></view>
			<button style="margin-top: 20rpx;color: #ffffff; border: 0; border-bottom: 1rpx solid #151515; " plain="true"
			 open-type="getUserInfo" @click="weixin()">微信登录</button>
			<!-- 登录协议 -->
			<view style="position: fixed;bottom: 10%; left: 16%; color: white; font-size: 28rpx;">
				<label class="radio">
					<radio value="r1" checked="true" /> 是否同意微聊协议、个人开发协议</label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usernametxt: 'admin',
				passwordtxt: '',
				aaaa: ''
			};
		},
		onBackPress(e) {
			// return true 表示禁止默认返回
			return true
		},
		// 加载判断是否token
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.aaaa = res.windowHeight + 'px'
				}
			})
		},
		methods: {
			weixin() {
				//#ifdef MP-WEIXIN
				console.log("微信小程序登录进入")
				uni.getUserInfo({
					success: (res) => {
						let username = JSON.parse(res.rawData)
						console.log(username)
						uni.setStorage({
							key: 'xiaochengxu',
							data: username,
							success: function() {
								console.log('小程序的登录信息缓存成功');
								uni.setStorage({
									key: 'login_status',
									data: 'ok',
									success: function() {
										uni.switchTab({
											url: "../index/index"
										});
									},
									fail() {
										uni.showToast({
											title: '储存用户信息失败',
											duration: 2000,
											icon: 'none'
										});
									}
								});
							}
						});
					},
					fail: () => {
						console.log("未授权");
					}
				})
				// #endif
				//#ifdef APP-PLUS
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// console.log(loginRes.authResult + 'session');
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								// 保存用户基本信息（异步）
								uni.setStorage({
									key: "userInfo",
									data: infoRes.userInfo,
									success() {
										console.log("缓存成功" + infoRes.userInfo);
										uni.setStorage({
											key: 'login_status',
											data: 'ok',
											success: function() {
												uni.switchTab({
													url: "../index/index"
												});
											},
											fail() {
												uni.showToast({
													title: '储存用户信息失败',
													duration: 2000,
													icon: 'none'
												});
											}
										});
									}
								})
								console.log(infoRes.userInfo);
							}
						});
					}
				})
				// #endif
			},
			Event_Login() {
				if (this.usernametxt && this.passwordtxt) {
					// console.log('登录', this.usernametxt, this.passwordtxt)
					// uni.request({
					// 	url: 'http://619.hk.bty.plus/applogin.php',
					// 	data: {
					// 		username: this.usernametxt,
					// 		userpass: this.passwordtxt
					// 	},
					// 	method: "GET",
					// 	success: res => {
					// 		console.log(res)
					// 		if (res.data.status == "登录失败") {
					// 			console.log(res)
					// 			uni.showToast({
					// 				title: '请确认您的密码是否正确',
					// 				duration: 2000,
					// 				icon: 'none'
					// 			});
					// 		} else {
					// 			let arrrys = res.data.user[0]
					// 			console.log(arrrys)
					// 			// 保存用户基本信息（异步）
					// 			uni.setStorage({
					// 				key: "userInfo",
					// 				data: arrrys,
					// 				success() {
					// 					// console.log("缓存成功");
					// 					uni.setStorage({
					// 						key: 'login_status',
					// 						data: 'ok',
					// 						success: function() {
					// 							uni.switchTab({
					// 								url: "../index/index"
					// 							});
					// 						},
					// 						fail() {
					// 							uni.showToast({
					// 								title: '储存用户信息失败',
					// 								duration: 2000,
					// 								icon: 'none'
					// 							});
					// 						}
					// 					});
					// 				}
					// 			})
					// 		}
					// 	},
					// 	fail() {
					uni.showModal({
						title: '错误提示',
						content: '十分抱歉、本人服务器宕机中！   是否需要以观察者模式进入',
						success: function(res) {
							if (res.confirm) {
								let arrrys = {
									"openId": "oRrdQt1SRtx9oohZ3cj-PQi6FL7Q",
									"nickName": "Ani",
									"gender": 1,
									"city": "广州",
									"province": "广东",
									"country": "中国",
									"avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/gkRibKgaZRka2kXlaRkpNiacsteqbfgsGDoiaKEX2y3F8kMialM5INgHl2CicvahxhO4CRojekDW5icMsCMDbZ3YiaV2Q/132",
									"unionId": "oU5YytwWQVfl117go4frJjE3O4uE"
								}

								uni.setStorage({
									key: "userInfo",
									data: arrrys,
									success() {
										// console.log("缓存成功");
										uni.setStorage({
											key: 'login_status',
											data: 'ok',
											success: function() {
												uni.switchTab({
													url: "../index/index"
												});
											},
											fail() {
												uni.showToast({
													title: '储存用户信息失败',
													duration: 2000,
													icon: 'none'
												});
											}
										});
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					// 	}
					// });
				} else {
					uni.showToast({
						title: '请填写账号、密码',
						icon: "none",
						duration: 3000
					});
				}


			},

		},

	}
</script>

<style lang="less" scoped>
	.border-radius {
		border-radius: 30rpx;
		opacity: .8;
	}

	.size {
		font-size: 39rpx;
	}

	.content {
		// wxbase64
		background-image: url("http://ani-qi.gitee.io/resources/lodin.jpeg");
		// 本地app
		// background-image: url(../../static/login.jpeg);
		background-size: 100% 100%;
		height: 100%;

		.logo_div {
			width: 100%;
			padding-top: 80px;
			// background-color: red;
			height: 400rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.login {
				width: 200rpx;
				height: 180rpx;

			}
		}

		.text-area {
			width: 88%;
			margin: 0 auto;
			font-size: 40rpx;

			.flex {
				margin-top: 80rpx;
				display: flex;
				width: 100%;
				justify-content: space-around;
				align-items: center;
			}

			input {
				height: 80rpx;
				width: 80%;
				font-size: 40rpx;
				border-bottom: 1px solid blue;
			}

			button {
				width: 100%;
			}
		}

	}
</style>
